<template>
	<div class="wrapper">
		<div class="box">
			{{ a }} + {{ b }} = {{ c }}
		</div>
		<div class="box1" :style="style">
			{{ a }} + {{ b }} = {{ c }}
		</div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
	<div class="box4"></div>
	<div class="box5"></div>
	<button @click="add">添加</button>
</template>
<script>
import { gsap } from 'gsap'
export default {
	data() {
		return {
			a: 1,
			b: 2,
			isMove: false,
			style: {}
		}
	},
	computed: {
		c() {
			return this.a + this.b;
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
			this.a++;
			this.isMove = !this.isMove;
			const obj = {
				x: 0
			}
			gsap.to(obj, {
				duration: 2,
				x: 360,
				ease: 'none',
				onUpdate: () => {
					console.log(obj.x);
					this.style = {
						'background-image': `linear-gradient(${obj.x}deg, transparent 90%, #000 90%)`
					}
				}
			})
		}
	},
	mounted() {
	}
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background-color: #fff;
	background-image:
		linear-gradient(0deg, transparent 70%, #ac9fc5 70%),
		linear-gradient(0deg, transparent 60%, #775976 60%),
		linear-gradient(0deg, transparent 50%, #8da389 50%),
}
.box1 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background-color: #fff;
	background-image: linear-gradient(10deg, transparent 70%, #000 70%);
	// &.move {
	// 	animation: move 2s linear infinite forwards;
	// }
}
.box2 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background-image: linear-gradient(-30deg, transparent 90%, #000 90%);
}
.box3 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background: linear-gradient(to left, #fff, 50%, #000);
}
.box4 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background: linear-gradient(to left, red 40%, blue 20%, green 65%);
}
.box5 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background: linear-gradient(to left, red 40% 50%, blue 70% 80%, green 90%);
}
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
}
@keyframes move {
	from {
		background-image: linear-gradient(0deg, transparent 70%, #000 70%);
	}
	to {
		background-image: linear-gradient(360deg, transparent 70%, #000 70%);
	}
}
</style>